<template>
  <section class="detail-header">
    <img :src="menuInfo.product_pic_url" alt="" class="detail-img" />

    <div class="detail-header-right">
      <div class="detail-title clearfix">
        <h1 class="title">{{ menuInfo.title }}</h1>
        <!-- 收藏：该菜谱是当前用户发布的，则不显示该字段 -->
        <div class="detail-collection" v-if="!isOnwer">
          <a
            href="javascript:;"
            :class="{
              'collection-at': true,
              'no-collection-at': menuInfo.isCollection,
            }"
            @click="toggleCollection"
          >
            {{ menuInfo.isCollection ? "已收藏" : "+ 收藏" }}
          </a>
        </div>
      </div>

      <ul class="detail-property clearfix">
        <li v-for="item in menuInfo.properties_show" :key="item.type">
          <strong>{{ item.parent_name }}</strong>
          <span>{{ item.name }}</span>
        </li>
      </ul>

      <div class="user">
        <router-link
          :to="{ name: 'space', query: { userId: menuInfo.userId } }"
          id="author_img"
          class="img"
        >
          <img :src="menuInfo.userInfo.avatar" alt="" />
        </router-link>

        <div class="info">
          <router-link
            :to="{ name: 'space', query: { userId: menuInfo.userId } }"
            id="author"
          >
            <h4>{{ menuInfo.userInfo.name }}</h4>
          </router-link>
          <span>
            菜谱：{{ menuInfo.userInfo.work_menus_len }} | 关注：{{
              menuInfo.userInfo.following_len
            }}
            | 粉丝：{{ menuInfo.userInfo.follows_len }}
          </span>
          <strong>{{ updataAt }}</strong>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { toggleCollection } from "@/service";

import { mapGetters } from "vuex";
export default {
  props: {
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },

  computed: {
    ...mapGetters(["isLogin"]),

    updataAt() {
      return this.menuInfo.updateAt?.slice(0, 10);
    },

    isOnwer() {
      let { userId } = this.$store.state.userInfo;
      return userId === this.menuInfo.userId;
    },
  },

  methods: {
    toggleCollection() {
      /* 先判断是否登录 */
      if (!this.isLogin) {
        this.$confirm("您还未登录, 跳转至登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(() => {
            this.$router.push({
              name: "login",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
        return;
      }
      toggleCollection({ menuId: this.menuInfo.menuId }).then((res) => {
        // console.log(res);
        this.menuInfo.isCollection = res.data.isCollection;
      });
    },
  },
};
</script>

<style>
.detail-header {
  margin-top: 40px;
  display: flex;
  background-color: #fff;
}
.detail-header .detail-img {
  width: 328px;
}
.detail-header-right {
  width: 662px;
}
.detail-title {
  box-sizing: border-box;
  width: 100%;
  padding-left: 25px;
  border-bottom: 1px solid #eee;
}
.title {
  max-width: 288px;
  height: 44px;
  padding: 28px 0;
  line-height: 44px;
  font-size: 36px;
  color: #333;
  float: left;
}
/* .collected{
    background-color: #999;
}
.collect{
    background-color: #ff3232;
} */
.detail-collection {
  float: right;
  display: block;
  height: 50px;
  line-height: 44px;
  color: #fff;
  padding: 0 14px;
  text-align: center;
  margin-top: 25px;
  cursor: pointer;
}
.detail-title a {
  display: inline-block;
  padding: 3px 0;
  width: 50px;
  color: #fff;
  text-align: center;
  line-height: 20px;
}
.collection-at {
  background-color: #ff3232;
}
.no-collection-at {
  background-color: #999;
}
.detail-property {
  margin-left: 30px;
  overflow: hidden;
}
.detail-property li {
  width: 200px;
  float: left;
  height: 48px;
  border-right: 1px solid #eee;
  padding: 18px 0 10px 20px;
  border-bottom: 1px solid #eee;
}
.detail-property li strong {
  color: #999;
  line-height: 18px;
  display: block;
  height: 18px;
}
.detail-property li span {
  font-size: 24px;
  color: #ff3232;
  line-height: 30px;
  display: block;
  width: 100px;
}
.user {
  height: 70px;
  padding: 20px 0 20px 20px;
  overflow: hidden;
  font-size: 12px;
}
a.img {
  display: block;
  height: 70px;
  width: 70px;
  float: left;
  border-radius: 35px;
  overflow: hidden;
  position: relative;
}
a.img img {
  display: block;
  height: 70px;
  width: 70px;
}
.info {
  float: left;
  padding-left: 10px;
  height: 70px;
}
.info h4 {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: #ff3232;
  position: relative;
}
.user span {
  line-height: 24px;
  display: block;
  color: #666;
  padding-top: 4px;
}
.user strong {
  line-height: 22px;
  color: #999;
}
</style>